<template>
  <div class="main-container">
    <div class="containBox">
      <div class="tabelLeft">
        <div class="tabTitle">
          <span class="title">活码分类</span>
          <div class="btns">
            <a-button
              style="padding: 0px 4px"
              type="text"
              v-permission="'/app/live/code/classify/insert'"
              size="small"
              @click="addClass"
              >新建</a-button
            >
          </div>
        </div>
        <div class="tagList">
          <div
            class="activeTag"
            v-for="(item, index) of typeClass"
            :key="index"
            @click="changeTagType(item)"
          >
            <span class="actives" v-if="activeTypeId == item.id">
              <span class="wraps" style="display: flex; align-items: center">
                <img
                  style="width: 20px; height: 20px; margin-left: 10px"
                  src="@/assets/live.png"
                  alt=""
                />
                <span
                  style="
                    text-align: left;
                    display: inline-block;
                    max-width: 150px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-left: 10px;
                  "
                  >{{ item.name }}</span
                >
              </span>
              <img
                @click.prevent.stop="onContextMenu(item, $event)"
                style="width: 20px; height: 20px; margin-right: 10px"
                src="@/assets/zuo.png"
                alt=""
              />
            </span>
            <span class="noactive" v-else>
              <span class="wraps" style="display: flex; align-items: center">
                <img
                  style="width: 20px; height: 20px; margin-left: 10px"
                  src="@/assets/live.png"
                  alt=""
                />
                <span
                  style="
                    display: inline-block;
                    max-width: 150px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-left: 10px;
                  "
                  >{{ item.name }}</span
                >
              </span>
              <img
                @click.prevent.stop="onContextMenu(item, $event)"
                style="width: 20px; height: 20px; margin-right: 10px"
                src="@/assets/zuo.png"
                alt=""
              />
            </span>
          </div>
        </div>
      </div>
      <div style="width: calc(100% - 254px)">
        <div style="width: 100%; padding: 20px; padding-bottom: 0px">
          <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
            <a-space :size="20">
              <a-form-item field="name" hide-label>
                <a-input v-model="form.name" placeholder="请输入活码名称" allow-clear />
              </a-form-item>
              <a-form-item field="type" hide-label>
                <a-select v-model="form.type" placeholder="请选择活码类型" allow-clear>
                  <a-option :value="0">内容</a-option>
                  <a-option :value="1">链接</a-option>
                  <a-option :value="2">自定义</a-option>
                </a-select>
              </a-form-item>
              <a-form-item field="addTime" hide-label>
                <a-date-picker
                  style="width: 100%"
                  v-model="form.addTime"
                  show-time
                  placeholder="请选择开始创建时间"
                  :time-picker-props="{ defaultValue: '12:00:00' }"
                  format="YYYY-MM-DD HH:mm:ss"
                  :shortcuts="[
                    {
                      label: '今日',
                      value: () => (
                        (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                          'YYYY-MM-DD HH:mm:ss'
                        )),
                        (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                          'YYYY-MM-DD HH:mm:ss'
                        ))
                      ),
                    },
                    {
                      label: '昨日',
                      value: () => (
                        (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                          .subtract(1, 'day')
                          .format('YYYY-MM-DD HH:mm:ss')),
                        (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                          .subtract(1, 'day')
                          .format('YYYY-MM-DD HH:mm:ss'))
                      ),
                    },
                    {
                      label: '七日',
                      value: () => (
                        (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                          .subtract(7, 'day')
                          .format('YYYY-MM-DD HH:mm:ss')),
                        (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                          .subtract(1, 'day')
                          .format('YYYY-MM-DD HH:mm:ss'))
                      ),
                    },
                    {
                      label: '本月',
                      value: () => (
                        (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                          'YYYY-MM-DD HH:mm:ss'
                        )),
                        (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                      ),
                    },
                    {
                      label: '上月',
                      value: () => (
                        (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                          .subtract(1, 'month')
                          .format('YYYY-MM-DD HH:mm:ss')),
                        (form.endTime = $dayjs()
                          .subtract(1, 'month')
                          .endOf('month')
                          .format('YYYY-MM-DD HH:mm:ss'))
                      ),
                    },
                  ]"
                  allow-clear
                />
              </a-form-item>
              <a-form-item style="width: calc(100% - 15px)" field="endTime" hide-label>
                <a-date-picker
                  style="width: 100%"
                  v-model="form.endTime"
                  show-time
                  placeholder="请选择结束创建时间"
                  :time-picker-props="{ defaultValue: '12:00:00' }"
                  :shortcuts="[
                    {
                      label: '今日',
                      value: () => (
                        (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                          'YYYY-MM-DD HH:mm:ss'
                        )),
                        (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                          'YYYY-MM-DD HH:mm:ss'
                        ))
                      ),
                    },
                    {
                      label: '昨日',
                      value: () => (
                        (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                          .subtract(1, 'day')
                          .format('YYYY-MM-DD HH:mm:ss')),
                        (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                          .subtract(1, 'day')
                          .format('YYYY-MM-DD HH:mm:ss'))
                      ),
                    },
                    {
                      label: '七日',
                      value: () => (
                        (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                          .subtract(7, 'day')
                          .format('YYYY-MM-DD HH:mm:ss')),
                        (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                          .subtract(1, 'day')
                          .format('YYYY-MM-DD HH:mm:ss'))
                      ),
                    },
                    {
                      label: '本月',
                      value: () => (
                        (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                          'YYYY-MM-DD HH:mm:ss'
                        )),
                        (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                      ),
                    },
                    {
                      label: '上月',
                      value: () => (
                        (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                          .subtract(1, 'month')
                          .format('YYYY-MM-DD HH:mm:ss')),
                        (form.endTime = $dayjs()
                          .subtract(1, 'month')
                          .endOf('month')
                          .format('YYYY-MM-DD HH:mm:ss'))
                      ),
                    },
                  ]"
                  format="YYYY-MM-DD HH:mm:ss"
                  allow-clear
                />
              </a-form-item>
              <a-form-item field="btns" hide-label>
                <a-button
                  type="primary"
                  html-type="submit"
                  v-permission="'/app/live/code/list'"
                  @click="doRefresh(1)"
                  ><template #icon>
                    <icon-search />
                  </template>
                  <!-- Use the default slot to avoid extra spaces -->
                  <template #default>搜索</template></a-button
                >
                <a-button
                  style="margin-left: 15px"
                  v-permission="'/app/live/code/list'"
                  @click="resetFn"
                  ><template #icon>
                    <icon-sync theme="outline" size="14" />
                  </template>
                  <!-- Use the default slot to avoid extra spaces -->
                  <template #default>重置</template></a-button
                >
              </a-form-item>
            </a-space>
          </a-form>
        </div>
        <div style="padding: 0 20px">
          <div
            style="
              display: flex;
              justify-content: space-between;
              border-top: 1px solid var(--color-neutral-2);
            "
          >
            <a-space :size="15" style="margin-top: 20px">
              <a-button v-permission="'/app/live/code/insert'" type="primary" @click="addCode">
                <template #default>新建</template>
              </a-button>
              <!-- <a-button type="outline" :loading="loading">
                <template #default>导出</template>
              </a-button> -->
            </a-space>
            <a-space :size="15" style="margin-top: 20px">
              <TableConfig
                @update-border="onUpdateBorder"
                @update-striped="onUpdateStriped"
                @refresh="doRefresh"
              />
            </a-space>
          </div>
        </div>
        <div style="width: 100%; padding: 20px">
          <a-table
            :loading="tableLoading"
            :bordered="{ wrapper: true, cell: tables.bordered }"
            :stripe="(tables.striped as boolean)"
            :data="table.dataList"
            :pagination="false"
            :row-key="rowKey"
            :row-class-name="rowClassNameFun"
            :scroll="{ x: 1200 }"
            :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          >
            <template #columns>
              <a-table-column
                v-for="item of tagColumns.list"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :fixed="item.fixed"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'type'" #cell="{ record }">
                  <span v-if="record.type == 0"> 内容</span>
                  <span v-if="record.type == 1"> 链接</span>
                  <span v-if="record.type == 2"> 自定义</span>
                </template>
                <template v-if="item.key === 'number'" #cell="{ record }">
                  {{ record.scanNumber ? record.scanNumber : 0 }}
                </template>
                <template v-if="item.key === 'remark'" #cell="{ record }">
                  <span v-if="record.remark"> {{ record.remark }}</span>
                  <span v-else>- - -</span>
                </template>
                <template v-if="item.key === 'name'" #cell="{ record }">
                  <div style="display: flex; align-items: center">
                    <img
                      @click="openOneCodeEr(record)"
                      style="width: 25px; height: 25px"
                      :src="
                        urlTitle +
                        qr +
                        '?content=' +
                        encodeURIComponent(urlTitle + '/wap/pages/index/code?code=' + record.code)
                      "
                    />
                    <span
                      style="
                        margin-left: 5px;
                        max-width: 150px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                      >{{ record.name }}</span
                    >
                  </div>
                </template>

                <template v-else-if="item.key === 'actions'" #cell="{ record }">
                  <a-space :size="2">
                    <a-button
                      v-permission="'/app/live/code/update'"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      @click="updateCode(record)"
                      >编辑</a-button
                    >
                    <a-button
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      @click="openOneCodeEr(record)"
                      >链接</a-button
                    >

                    <a-button
                      v-permission="
                        '/app/live/code/log/data/statistics' &&
                        '/app/live/code/log/data/range/line' &&
                        '/app/live/code/log/list'
                      "
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      @click="openDrawer(record)"
                      >统计</a-button
                    >
                    <a-button
                      size="small"
                      v-permission="'/app/series/decoration/save'"
                      class="butten"
                      type="text"
                      @click="gotoZx(record)"
                    >
                      装修
                    </a-button>
                    <a-button
                      v-permission="'/app/live/code/delete'"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      @click="delCode(record)"
                      >删除</a-button
                    >
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter :pagination="pagination" position="center" />
        </div>
      </div>
    </div>
    <!-- 添加活码 -->
    <a-modal
      v-model:visible="addPop"
      @before-close="handleCancel"
      :title="title"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="codeAdds" :auto-label-width="true" :model="codeForm">
          <a-form-item
            label="活码名称"
            field="name"
            :rules="[
              { required: true, message: '活码名称不能为空' },
              { minLength: 1, maxLength: 100, message: '活码名称必须小于100个字符' },
            ]"
            :validate-trigger="['change', 'input']"
            asterisk-position="end"
          >
            <a-input v-model.trim="codeForm.name" placeholder="请输入活码名称" allow-clear />
          </a-form-item>
          <a-form-item field="type" label="活码类型">
            <a-radio-group
              class="radio-bcg"
              v-model="codeForm.type"
              @change=";(codeForm.content = ''), (codeForm.collectionTips = false)"
            >
              <a-radio :value="0">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">内容</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">链接</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">自定义</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
            <template #extra>
              <div
                >内容：打开活码页面后显示你设置的内容；跳转：打开活码页面后跳转到指定链接；自定义：点击装修按钮，自定义页面内容</div
              >
            </template>
          </a-form-item>
          <a-form-item
            field="collectionTips"
            label="收藏提示"
            v-if="codeForm.type == 0 || codeForm.type == 2"
          >
            <a-radio-group class="radio-bcg" v-model="codeForm.collectionTips">
              <a-radio :value="true">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">开启</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="false">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">关闭</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
            <template #extra>
              <div>客户打开活码后，会弹出收藏提示</div>
            </template>
          </a-form-item>
          <a-form-item
            v-if="codeForm.collectionTips == true"
            label="提示时间"
            field="collectionTime"
            :rules="[{ required: true, message: '提示时间不能为空' }]"
            :validate-trigger="['change', 'input']"
            asterisk-position="end"
          >
            <a-input-number
              v-model.trim="codeForm.collectionTime"
              placeholder="请输入提示时间"
              allow-clear
            />
            <template #extra>
              <div>比如输入3，收藏提示弹窗需要等待3秒以后才可以关闭</div>
            </template>
          </a-form-item>
          <a-form-item label="落地域名" field="landLink" asterisk-position="end">
            <a-input v-model.trim="codeForm.landLink" placeholder="请输入落地域名" allow-clear />
            <template #extra>
              <div>打开活码后，会跳转到落地域名，一般客户感知不到活码的域名，可以有效防封</div>
            </template>
          </a-form-item>
          <a-form-item label="活码备注" field="remark" asterisk-position="end">
            <a-input v-model.trim="codeForm.remark" placeholder="请输入活码备注" allow-clear />
            <template #extra>
              <div>可以不填写备注</div>
            </template>
          </a-form-item>
          <a-divider dashed style="margin-bottom: 25px">活码内容</a-divider>
          <a-form-item
            v-if="codeForm.type == 0 || codeForm.type == 2"
            label="页面标题"
            field="title"
            :rules="[
              { required: true, message: '页面标题不能为空' },
              { minLength: 1, maxLength: 100, message: '页面标题必须小于100个字符' },
            ]"
            :validate-trigger="['change', 'input']"
            asterisk-position="end"
          >
            <a-input v-model.trim="codeForm.title" placeholder="请输入页面标题" allow-clear />
            <template #extra>
              <div>活码的页面标题，请按需求填写</div>
            </template>
          </a-form-item>
          <a-form-item
            field="content"
            v-if="codeForm.type !== 2"
            :label="codeForm.type == 0 ? '活码内容' : '活码链接'"
          >
            <RichTextEditor
              v-if="codeForm.type == 0"
              v-model="codeForm.content"
              ref="richTextEditors"
            />
            <a-input v-else v-model.trim="codeForm.content" placeholder="请输入链接" allow-clear />
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkAdd">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 添加分类 -->
    <a-modal
      v-model:visible="addClassPop"
      @before-close="handleCancelClass"
      :title="classTitle"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="subAdds" :auto-label-width="true" :model="subFormClass">
          <a-form-item
            label="分类名称"
            field="name"
            :rules="[
              { required: true, message: '分类名称不能为空' },
              { minLength: 1, maxLength: 100, message: '分类名称必须小于100个字符' },
            ]"
            :validate-trigger="['change', 'input']"
            asterisk-position="end"
          >
            <a-input v-model.trim="subFormClass.name" placeholder="请输入分类名称" allow-clear />
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelClass">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkAddClass">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 链接地址 -->
    <a-modal
      v-model:visible="linkShow"
      title="链接地址"
      width="521px"
      :mask-closable="false"
      title-align="start"
      :footer="false"
    >
      <div style="display: flex; justify-content: center; margin: 20px">
        <img :src="imgUrl" style="width: 170px; height: 170px; text-align: center" alt="" />
      </div>
      <div style="display: flex; justify-content: center">
        <div
          style="
            width: 390px;
            background-color: #f2f3f5;
            border-radius: 4px;
            text-align: center;
            padding: 4px;
          "
        >
          <a id="bols" :href="urlsa" style="color: #000000" target="_blank">
            <div
              style="
                display: inline-block;
                white-space: pre-wrap;
                word-break: break-all;
                word-wrap: break-word;
              "
            >
              {{ urlsa }}
            </div>
          </a>
        </div>
      </div>
      <div style="display: flex; justify-content: center; margin: 20px">
        <div style="display: flex; width: 390px; justify-content: space-between">
          <a-button type="primary" status="success" long @click="downs">保存二维码</a-button>
          <div style="width: 40px"></div>
          <a-button type="primary" long @click="useCommon.copy(urlsa)">复制链接</a-button>
        </div>
      </div>
    </a-modal>
    <!-- 统计 -->
    <a-drawer
      :width="929"
      v-model:visible="drawerShow"
      title="数据统计-5分钟统计一次"
      :footer="false"
      :mask-closable="false"
    >
      <div style="padding: 20px">
        <div class="box-top">
          <div class="top-item">
            <div class="title">总扫描量</div>
            <div class="num">{{ topForm.all }}次</div>
          </div>
          <div class="top-items">
            <div class="title">今日</div>
            <div class="num">{{ topForm.today }}次</div>
          </div>
          <div class="top-items">
            <div class="title">昨日</div>
            <div class="num">{{ topForm.yesterday }}次</div>
          </div>
          <div class="top-items">
            <div class="title">七日</div>
            <div class="num">{{ topForm.lastSevenDays }}次</div>
          </div>
        </div>
        <div style="width: 889px; margin-top: 20px">
          <div>
            数据范围
            <span
              @click="changeTime('今日')"
              :class="activeDay3 == '今日' ? 'time-box-active' : 'time-box'"
              >今日</span
            >
            <span
              @click="changeTime('昨日')"
              :class="activeDay3 == '昨日' ? 'time-box-active' : 'time-box'"
              >昨日</span
            >
            <span
              @click="changeTime('近七日')"
              :class="activeDay3 == '近七日' ? 'time-box-active' : 'time-box'"
              >近七日</span
            >
            <span
              @click="changeTime('本月')"
              :class="activeDay3 == '本月' ? 'time-box-active' : 'time-box'"
              >本月</span
            >
            <span
              @click="changeTime('上月')"
              :class="activeDay3 == '上月' ? 'time-box-active' : 'time-box'"
              >上月</span
            >
            <span
              @click="changeTime('近三十日')"
              :class="activeDay3 == '近三十日' ? 'time-box-active' : 'time-box'"
              >近三十日</span
            >
          </div>
          <div id="opnhggggggggggg" style="width: 889px; height: 284px"></div>
        </div>
        <div style="width: 889px; margin-top: 20px">
          <div>
            扫码数据
            <span
              @click="changeTimes('今日')"
              :class="activeDay == '今日' ? 'time-box-active' : 'time-box'"
              >今日</span
            >
            <span
              @click="changeTimes('昨日')"
              :class="activeDay == '昨日' ? 'time-box-active' : 'time-box'"
              >昨日</span
            >
            <span
              @click="changeTimes('近七日')"
              :class="activeDay == '近七日' ? 'time-box-active' : 'time-box'"
              >近七日</span
            >
            <span
              @click="changeTimes('本月')"
              :class="activeDay == '本月' ? 'time-box-active' : 'time-box'"
              >本月</span
            >
            <span
              @click="changeTimes('上月')"
              :class="activeDay == '上月' ? 'time-box-active' : 'time-box'"
              >上月</span
            >
            <span
              @click="changeTimes('近三十日')"
              :class="activeDay == '近三十日' ? 'time-box-active' : 'time-box'"
              >近三十日</span
            >
          </div>
          <div style="width: 100%; padding: 20px 0">
            <a-table
              :loading="loading"
              :bordered="{ wrapper: true, cell: tables.bordered }"
              :stripe="(tables.striped as boolean)"
              :data="ipList"
              :pagination="false"
              :row-key="rowKey"
              :row-class-name="rowClassNameFun"
              :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
            >
              <template #columns>
                <a-table-column
                  v-for="item of tagColumns.lists"
                  :key="item.key"
                  align="left"
                  :title="(item.title as string)"
                  :width="item.width"
                  :data-index="(item.key as string)"
                  :fixed="item.fixed"
                  :ellipsis="true"
                  :tooltip="true"
                />
              </template>
            </a-table>
            <TableFooter :pagination="paginations" position="center" />
          </div>
        </div>
      </div>
    </a-drawer>
    <ul v-show="showContextMenu" class="contex-menu-wrapper" :style="contextMenuStyle">
      <li>
        <a-button
          type="text"
          @click="updatUserPopTag"
          v-permission="'/app/live/code/classify/update'"
        >
          编辑
        </a-button>
      </li>
      <li>
        <a-button
          status="warning"
          v-permission="'/app/live/code/classify/delete'"
          type="text"
          @click="delLimitTypes"
        >
          删除
        </a-button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import http from '@/api/http'
  import { qr } from '@/api/url'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import useCommonStore from '@/store/modules/common'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import dayjs from 'dayjs'
  import * as echart from 'echarts'
  import { useRouter } from 'vue-router'
  import { onMounted, reactive, ref, watch } from 'vue'
  const useCommon = useCommonStore()
  const router = useRouter()
  //统计
  const activeDay = ref('今日')
  const drawerShow = ref(false)
  const topForm: any = ref({})
  const centerTime = ref({
    addTime: '',
    endTime: '',
  })
  const bottomTime = ref({
    addTime: '',
    endTime: '',
  })
  const paginations = usePagination(getBottom)
  const changeTimes = (item1: any) => {
    activeDay.value = item1
    if (item1 == '今日') {
      bottomTime.value.addTime = dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
      bottomTime.value.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '昨日') {
      bottomTime.value.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(1, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      bottomTime.value.endTime = dayjs('23:59:59', 'HH:mm:ss')
        .subtract(1, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '上月') {
      bottomTime.value.addTime = dayjs(`01 00:00:00`, 'DD HH:mm:ss')
        .subtract(1, 'month')
        .format('YYYY-MM-DD HH:mm:ss')
      bottomTime.value.endTime = dayjs()
        .subtract(1, 'month')
        .endOf('month')
        .format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '本月') {
      bottomTime.value.addTime = dayjs('01 00:00:00', 'DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
      bottomTime.value.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '近七日') {
      bottomTime.value.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(6, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      bottomTime.value.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '近三十日') {
      bottomTime.value.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(29, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      bottomTime.value.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    }
    getBottom(1)
  }
  const activeDay3 = ref('今日')
  const id = ref('')
  const changeTime = (item1: any) => {
    activeDay3.value = item1
    if (item1 == '今日') {
      centerTime.value.addTime = dayjs('00:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
      centerTime.value.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '昨日') {
      centerTime.value.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(1, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      centerTime.value.endTime = dayjs('23:59:59', 'HH:mm:ss')
        .subtract(1, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '上月') {
      centerTime.value.addTime = dayjs(`01 00:00:00`, 'DD HH:mm:ss')
        .subtract(1, 'month')
        .format('YYYY-MM-DD HH:mm:ss')
      centerTime.value.endTime = dayjs()
        .subtract(1, 'month')
        .endOf('month')
        .format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '本月') {
      centerTime.value.addTime = dayjs('01 00:00:00', 'DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
      centerTime.value.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '近七日') {
      centerTime.value.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(6, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      centerTime.value.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    } else if (item1 == '近三十日') {
      centerTime.value.addTime = dayjs('00:00:00', 'HH:mm:ss')
        .subtract(29, 'day')
        .format('YYYY-MM-DD HH:mm:ss')
      centerTime.value.endTime = dayjs('23:59:59', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    }
    getCenter(id.value)
  }
  async function openDrawer(val: any) {
    await (id.value = val.id)
    await getTop(val.id)
    await changeTime('近三十日')
    await changeTimes('近三十日')
    await (drawerShow.value = true)
  }
  function getTop(val: any) {
    http
      .get({
        url: '/app/live/code/log/data/statistics',
        data: () => {
          return {
            liveCodeId: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          topForm.value = res.data
        } else {
          Message.error(res.msg)
        }
      })
      .catch(console.log)
  }
  function getCenter(val: any) {
    http
      .get({
        url: '/app/live/code/log/data/range/line',
        data: () => {
          return {
            liveCodeId: val,
            addTime: centerTime.value.addTime,
            endTime: centerTime.value.endTime,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          // topForm.value = res.data
          let list = addDay(res.data, activeDay3.value)
          var hour: any = []
          var value: any = []
          list.forEach((item: any) => {
            hour.push(item.name)
            value.push(item.y)
          })
          var chartDom6: any = document.getElementById('opnhggggggggggg')
          var myCharts = echart.init(chartDom6)
          var options
          options = {
            xAxis: {
              type: 'category',
              data: hour,
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value}次',
              },
            },
            tooltip: {
              trigger: 'axis',
              formatter: '访问次数 :{c0}次;  ',
            },
            series: [
              {
                name: '流量',
                data: value,
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0, //右
                    y: 0, //下
                    x2: 0, //左
                    y2: 1, //上
                    colorStops: [
                      {
                        offset: 0,
                        color: '#3491fa', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#E8F7FF', // 100% 处的颜色
                      },
                    ],
                  },
                },
                lineStyle: {
                  normal: {
                    color: '#3491fa',
                  },
                },
              },
            ],
          }

          options && myCharts.setOption(options)
        } else {
          Message.error(res.msg)
        }
      })
      .catch(console.log)
  }
  const ipList: any = ref([])
  function getBottom(val?: any) {
    if (val) {
      paginations.page = val
    }
    loading.value = true
    http
      .get({
        url: '/app/live/code/log/list',
        data: () => {
          return {
            liveCodeId: id.value,
            addTime: bottomTime.value.addTime,
            endTime: bottomTime.value.endTime,
            page: paginations.page,
            size: paginations.pageSize,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          loading.value = false
          ipList.value = res.data.list
          paginations.setTotalSize((res.data as any).totalSize)
        } else {
          Message.error(res.msg)
        }
      })
      .catch(() => {
        loading.value = false
      })
  }
  function addDay(val: any, val1: any) {
    let date = new Date()
    var list: any = []
    if (val1 == '今日') {
      const hour = date.getHours()
      for (var i = 0; i <= hour; i++) {
        if (i < 10) {
          let num = ''
          num = '0' + i + ':00'
          list.push({
            name: num,

            y: 0,
          })
        } else {
          list.push({
            name: i + ':00',

            y: 0,
          })
        }
      }
    } else if (val1 == '昨日') {
      for (var i = 0; i <= 23; i++) {
        if (i < 10) {
          let num = ''
          num = '0' + i + ':00'
          list.push({
            name: num,

            y: 0,
          })
        } else {
          list.push({
            name: i + ':00',

            y: 0,
          })
        }
      }
    } else if (val1 == '上月') {
      val.forEach((item: any) => {
        item.name = item.x.slice(5, 10)
      })
      const today = new Date()
      let year = today.getFullYear()
      let month: any = today.getMonth() // 0-11 表示1-12月
      if (month === 0) {
        month = 12
        year--
      }
      const lastMonth = new Date(year, month, 0)

      for (var i = 1; i <= lastMonth.getDate(); i++) {
        if (month < 10 && i == 1) {
          month = '0' + month
        }
        if (i < 10) {
          i = '0' + i
        }
        list.push({
          name: month + '-' + i,

          y: 0,
        })
      }
    } else if (val1 == '本月') {
      val.forEach((item: any) => {
        item.name = item.x.slice(5, 10)
      })
      const today = new Date()
      const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
      const dateRange = []

      while (today >= startOfMonth) {
        dateRange.push({
          name: new Date(today).toISOString().split('T')[0].slice(5, 10),

          y: 0,
        })
        today.setDate(today.getDate() - 1)
      }

      // 反转数组以得到正确的顺序
      list = dateRange.reverse()
    } else if (val1 == '近三十日') {
      val.forEach((item: any) => {
        item.name = item.x.slice(5, 10)
      })

      for (let i = 29; i >= 0; i--) {
        const dates = new Date(date)
        dates.setDate(dates.getDate() - i)
        const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
        list.push({
          name: dateString.slice(5, 10),

          y: 0,
        })
      }
    } else if (val1 == '近七日') {
      val.forEach((item: any) => {
        item.name = item.x.slice(5, 10)
      })

      for (let i = 6; i >= 0; i--) {
        const dates = new Date(date)
        dates.setDate(dates.getDate() - i)
        const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
        list.push({
          name: dateString.slice(5, 10),
          y: 0,
        })
      }
    }
    console.log(list)
    if (val1 == '近七日' || val1 == '上月' || val1 == '本月' || val1 == '近三十日') {
      val.forEach((item: any) => {
        list.forEach((items: any) => {
          if (item.x.slice(5, 10) == items.name) {
            items.y = item.y
          }
        })
      })
    } else {
      val.forEach((item: any) => {
        list.forEach((items: any) => {
          if (item.x == items.name) {
            items.y = item.y
          }
        })
      })
    }

    return list
  }
  const gotoZx = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要前往装修？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        router.push({ path: '/application/liveCode/design', query: { seriesId: item.id } })
      },
    })
  }
  //链接
  const linkShow = ref(false)
  const imgUrl = ref('')
  const urlsa = ref('')
  function openOneCodeEr(val: any) {
    urlsa.value =
      window.location.protocol +
      '//' +
      window.location.host +
      '/wap/pages/index/code?code=' +
      val.code
    imgUrl.value =
      window.location.protocol +
      '//' +
      window.location.host +
      qr +
      '?content=' +
      encodeURIComponent(
        window.location.protocol +
          '//' +
          window.location.host +
          '/wap/pages/index/code?code=' +
          val.code
      )
    linkShow.value = true
  }
  //下载图片
  function downloadIamge(imgsrc: any, name: any) {
    //下载图片地址和图片名
    var image = new Image()
    // 解决跨域 Canvas 污染问题
    image.setAttribute('crossOrigin', 'anonymous')
    image.onload = function () {
      var canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      var context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, image.width, image.height)
      var url = canvas.toDataURL('image/png') //得到图片的base64编码数据
      var a = document.createElement('a') // 生成一个a元素
      var event = new MouseEvent('click') // 创建一个单击事件
      a.download = name || 'photo' // 设置图片名称
      a.href = url // 将生成的URL设置为a.href属性
      a.dispatchEvent(event) // 触发a的单击事件
    }
    image.src = imgsrc
  }
  // 改downs这个函数就行，downloadIamge（‘图片下载地址’，图片名字）
  function downs() {
    // 主要是为了名字不重复
    var name = new Date().getTime()
    downloadIamge(imgUrl.value, name)
  }
  //活码
  const addPop = ref(false)
  const title = ref('添加活码')
  function handleCancel() {
    addPop.value = false
    codeForm.value = {
      //活码分类ID
      classifyId: '',
      //活码名称
      name: '',
      //活码标题
      title: '',
      //收藏提示
      collectionTips: true,
      //提示时间(秒) 默认3s
      collectionTime: 3,
      //落地域名
      landLink: '',
      //活码类型 0内容 1链接
      type: 0,
      //活码内容
      content: '',
      //活码备注
      remark: '',
    }
    codeAdds.value?.resetFields()
  }
  const serchForm = ref()
  function resetFn() {
    serchForm.value?.resetFields()
    doRefresh(1)
  }
  function handleBeforeOkAdd() {
    codeForm.value.classifyId = activeTypeId.value
    codeAdds.value?.validate().then((error: any) => {
      if (!error) {
        if (!codeForm.value.id) {
          http
            .post({
              url: '/app/live/code/insert',
              data: () => {
                return {
                  ...codeForm.value,
                }
              },
            })
            .then((res) => {
              btnLoading.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                addPop.value = false
                codeForm.value.id = null
                codeAdds.value?.resetFields()
                doRefresh()
              } else {
                Message.error(res.msg)
              }
            })
        } else {
          title.value = '编辑活码'
          http
            .post({
              url: '/app/live/code/update',
              data: () => {
                return {
                  ...codeForm.value,
                }
              },
            })
            .then((res) => {
              btnLoading.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                addPop.value = false
                codeForm.value.id = null
                codeAdds.value?.resetFields()
                doRefresh()
              } else {
                Message.error(res.msg)
              }
            })
        }
      }
    })
  }
  function updateCode(val: any) {
    codeForm.value = JSON.parse(JSON.stringify(val))
    title.value = '编辑活码'
    addPop.value = true
  }
  function addCode() {
    title.value = '添加活码'
    addPop.value = true
  }
  const codeAdds = ref()
  const codeForm: any = ref({
    //活码分类ID
    classifyId: '',
    //活码名称
    name: '',
    //活码标题
    title: '',
    //收藏提示
    collectionTips: true,
    //提示时间(秒) 默认3s
    collectionTime: 3,
    //落地域名
    landLink: '',
    //活码类型 0内容 1链接
    type: 0,
    //活码内容
    content: '',
    //活码备注
    remark: '',
  })
  function delCode(val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此活码吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        http
          .get({
            url: '/app/live/code/delete',
            data: () => {
              return {
                id: val.id,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  //搜索
  const loading = ref(false)
  const pagination = usePagination(doRefresh)
  const form = reactive({
    classifyId: '',
    name: '',
    type: '',
    addTime: '',
    endTime: '',
  })
  const rowKey = useRowKey('id')
  const table = useTable()
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }
  const tagColumns: any = reactive({
    list: [
      {
        title: '活码ID',
        key: 'id',
        dataIndex: 'id',
        checked: true,
        width: 129,
      },
      {
        title: '活码名称',
        key: 'name',
        dataIndex: 'name',
        checked: true,
        width: 269,
      },
      {
        title: '活码类型',
        key: 'type',
        dataIndex: 'type',
        checked: true,
        width: 169,
      },

      {
        title: '扫码次数',
        key: 'number',
        dataIndex: 'number',
        checked: true,
        width: 170,
      },
      {
        title: '创建时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 191,
      },
      {
        title: '活码备注',
        key: 'remark',
        dataIndex: 'remark',
        checked: true,
        width: 191,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        width: 230,
        fixed: 'right',
        align: 'left',
        checked: true,
      },
    ],
    lists: [
      {
        title: 'IP',
        key: 'ip',
        dataIndex: 'ip',
        checked: true,
        width: 167,
      },
      {
        title: '地址',
        key: 'address',
        dataIndex: 'address',
        checked: true,
        width: 222,
      },
      {
        title: '设备',
        key: 'device',
        dataIndex: 'device',
        checked: true,
        width: 144,
      },

      {
        title: '浏览器',
        key: 'browser',
        dataIndex: 'browser',
        checked: true,
        width: 144,
      },
      {
        title: '操作时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 212,
      },
    ],
  })
  function doRefresh(value?: number) {
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    form.classifyId = activeTypeId.value
    http
      .get({
        url: '/app/live/code/list',
        data: () => {
          return {
            page: pagination.page,
            size: pagination.pageSize,
            ...form,
          }
        },
      })
      .then((res) => {
        tableLoading.value = false
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }
  //添加操作分类
  const typeClass: any = ref([
    // {
    //   id: 1,
    //   name: '测试分类',
    // },
  ])
  const showContextMenu = ref(false)
  const subAdds = ref<typeof Form>()
  const contextMenuStyle: any = reactive({
    left: '0',
    top: '0',
  })
  const classTitle = ref('添加分类')
  const addClassPop = ref(false)
  const subFormClass: any = ref({
    name: '',
  })
  const activeTypeId = ref('')
  function onContextMenu(item: any, e: MouseEvent) {
    if (item.species == 0) {
      item.species = ['']
    }
    subFormClass.value = JSON.parse(JSON.stringify(item))
    const { clientX, clientY } = e
    e.preventDefault()
    contextMenuStyle.left = clientX - 200 + 'px'
    contextMenuStyle.top = clientY - 90 + 'px'
    showContextMenu.value = true
  }
  function changeTagType(value: any) {
    activeTypeId.value = value.id
    // getCancelClassList(1)
    doRefresh()
  }
  function addClass() {
    subFormClass.value.id = null
    classTitle.value = '添加分类'
    addClassPop.value = true
  }
  function updatUserPopTag() {
    classTitle.value = '编辑分类'
    // if (item.species.length == 0) {
    //   item.species = ['']
    // }
    addClassPop.value = true
  }
  function delLimitTypes(item: any) {
    let delId = ''
    if (item.id) {
      delId = item.id
    } else {
      delId = subFormClass.value.id
    }
    Modal.warning({
      title: '操作确认',
      content: '确认后此分类下所有活码将会被删除，确定要删除此分类吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        http
          .get({
            url: '/app/live/code/classify/delete',
            data: () => {
              return {
                id: delId,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              getCancelClassList()
              if (typeClass.value.length > 0) {
                activeTypeId.value = typeClass.value[0].id
              }
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  function handleCancelClass() {
    subAdds.value?.resetFields()
    addClassPop.value = false
  }
  function getCancelClassList() {
    http
      .get({
        url: '/app/live/code/classify/list',
        data: () => {
          return {}
        },
      })
      .then((res) => {
        if (activeTypeId.value == '') {
          if (res.data.length > 0) {
            activeTypeId.value = res.data[0].id
          }
        } else {
          activeTypeId.value = activeTypeId.value
        }
        typeClass.value = res.data
        if (res.data.length > 0) {
          doRefresh(1)
        }
      })
  }
  const btnLoading = ref(false)
  function handleBeforeOkAddClass() {
    subAdds.value?.validate().then((error: any) => {
      if (!error) {
        if (!subFormClass.value.id) {
          http
            .get({
              url: '/app/live/code/classify/insert',
              data: () => {
                return {
                  ...subFormClass.value,
                }
              },
            })
            .then((res) => {
              btnLoading.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                addClassPop.value = false
                subFormClass.value.id = null
                subAdds.value?.resetFields()
                getCancelClassList()
              } else {
                Message.error(res.msg)
              }
            })
        } else {
          classTitle.value = '编辑分类'
          http
            .get({
              url: '/app/live/code/classify/update',
              data: () => {
                return {
                  ...subFormClass.value,
                }
              },
            })
            .then((res) => {
              btnLoading.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                addClassPop.value = false
                subFormClass.value.id = null
                subAdds.value?.resetFields()
                getCancelClassList()
              } else {
                Message.error(res.msg)
              }
            })
        }
      }
    })
  }
  function closeNext() {
    showContextMenu.value = false
  }
  const urlTitle = ref('')
  onMounted(async () => {
    urlTitle.value = window.location.protocol + '//' + window.location.host
    getCancelClassList()
  })
  watch(
    () => showContextMenu.value,
    () => {
      if (showContextMenu.value) {
        document.body.addEventListener('click', closeNext)
      } else {
        document.body.removeEventListener('click', closeNext)
      }
    },
    { deep: true }
  )
</script>

<style lang="less" scoped>
  .time-box {
    margin-left: 10px;
    cursor: pointer;
  }

  .time-box-active {
    margin-left: 10px;
    color: #40a1ff;
    cursor: pointer;
  }

  .box-top {
    width: 100%;
    height: 115px;
    border-radius: 10px;
    background-color: #f5f5f5;
    padding: 22.5px;
    display: flex;
    align-items: center;

    .top-item {
      width: 25%;
      height: 70px;

      .title {
        line-height: 35px;
        color: #86909c;
        font-size: 16px;
      }

      .num {
        line-height: 35px;
        font-size: 18px;
      }
    }

    .top-items {
      width: 25%;
      border-left: 1px solid #c9cdd4;
      height: 70px;
      padding-left: 22.5px;

      .title {
        line-height: 35px;
        color: #86909c;
        font-size: 16px;
      }

      .num {
        line-height: 35px;
        font-size: 18px;
      }
    }
  }

  .arco-form .arco-space {
    :deep(.arco-space-item) {
      width: 20% !important;
    }
  }

  .form-item-20 {
    width: calc(20% - 15px);
  }

  .containBox {
    width: 100%;
    display: flex;
    background-color: var(--color-bg-1);
    border-radius: 10px;

    .tabelLeft {
      width: 254px;
      min-height: 100%;
      padding: 20px;
      box-sizing: border-box;
      border-right: 1px solid var(--color-neutral-2);

      .tabTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          color: rgb(var(--gray-10));
          font-size: 18px;
        }

        .btns {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }

      .tagList {
        width: 214px;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;

        .activeTag {
          width: 100%;
          height: 45px;
          font-size: 14px;
          margin-bottom: 5px;

          .actives {
            display: block;
            cursor: pointer;
            width: 100%;
            height: 100%;
            line-height: 45px;
            background-color: var(--color-neutral-2);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .wraps {
            cursor: pointer;
          }

          .noactive {
            display: block;
            cursor: pointer;
            width: 100%;
            height: 100%;
            line-height: 45px;

            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }

  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  .huakaClass :deep(.arco-form-item-message) {
    margin-left: 42px !important;
  }

  :deep(.arco-tabs-nav-tab) {
    background-color: var(--color-bg-1);
    padding: 20px 0;
    border-radius: 10px;
  }

  :deep(.arco-tabs-content::before) {
    height: 0px !important;
  }

  :deep(.arco-tabs-tab) {
    margin: 0 20px;
    padding: 0;
    padding-bottom: 5px;
  }

  :deep(.arco-tabs-nav::before) {
    position: static !important;
    height: 0px !important;
  }

  :deep(.arco-tabs-content) {
    padding-top: 20px;
  }

  .contex-menu-wrapper {
    position: absolute;
    width: 100px;
    z-index: 999;
    list-style: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    background-color: var(--color-bg-1);
    padding-left: 0;
    border-radius: 4px;

    & > li {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 0px 0;

      & button {
        width: 100%;
      }
    }

    & > li:hover {
      color: var(--primary-color);
    }
  }

  .top {
    margin-bottom: 20px;
    background-color: var(--color-bg-1);
    border-radius: 10px;

    .box {
      display: flex;
      align-items: center;
      height: 30px;
      margin: 5px 10px;

      .line {
        width: 5px;
        height: 25px;
        margin-right: 10px;
        background-color: #40a1ff;
      }

      .text {
        font-size: 16px;
        line-height: 25px;
        text-align: center;
      }
    }

    .flex {
      display: flex;
      justify-content: space-around;
      margin: 12px 7px;

      .dataBox:last-child {
        margin-right: 0px !important;
      }

      .dataBox {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-right: 20px;
        height: 150px;
        background-image: linear-gradient(rgb(var(--arcoblue-1)), #fff);
        border: 1px solid #f2f3f5;
        border-radius: 10px;

        .img {
          width: 70px;
          height: 70px;
          margin-right: 20px;
          border-radius: 50%;
        }

        .name {
          margin-top: 0;
        }

        .number {
          font-size: 22px;
        }
      }
    }
  }

  .avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .avatar-vip {
      border: 2px solid #cece1e;
    }

    .vip {
      position: absolute;
      top: 0;
      right: -9px;
      width: 15px;
      transform: rotate(60deg);
    }
  }

  .gender-container {
    .gender-icon {
      width: 20px;
    }
  }

  .custom-checkbox-card {
    padding: 5px 16px;
    border-radius: 4px;
    width: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: var(--color-fill-2);
  }

  .custom-checkbox-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-checkbox-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }

  .custom-checkbox-card-title {
    color: var(--color-text-1);
    font-size: 14px;
  }

  .custom-checkbox-card:hover,
  .custom-checkbox-card-checked,
  .custom-checkbox-card:hover .custom-checkbox-card-mask,
  .custom-checkbox-card-checked .custom-checkbox-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-checkbox-card:hover .custom-checkbox-card-title,
  .custom-checkbox-card-checked .custom-checkbox-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }

  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
</style>
<style scoped>
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
</style>
